<template>
    <div id="wai">
        <div class="container">
            <!-- 所有的表单页面 -->
            <div class="form-box">
                <!-- 注册 -->
                <div v-if="!flag" class="register-box">
                    <h1>register</h1>
                    <input v-model="register_news.user_name" type="text" placeholder="昵称">
                    <input v-model="register_news.user_email" type="email" placeholder="邮箱">
                    <table>
                        <tr>
                            <td><label class="lab">男：<input v-model="register_news.user_sex" class="xb" type="radio"
                                        value="男" name="sex" checked></label></td>
                            <td><label class="lab">女：<input v-model="register_news.user_sex" class="xb" type="radio"
                                        value="女" name="sex"></label></td>
                        </tr>
                    </table>
                    <input v-model="register_news.user_password" type="password" placeholder="密码">
                    <table>
                        <tr>
                            <td><input v-model="register_news.user_captcha" type="text" @keyup.enter="click_register"
                                    placeholder="验证码"></td>
                            <td><button :id="buttonClass" :disabled="isCounting" @click="get_captcha">{{ count }}</button>
                            </td>
                        </tr>
                    </table>
                    <button class="zhuce" @click="click_register">注册</button>
                </div>
                <!-- 密码登录 -->
                <div v-if="flag && !flag2" class="login-box">
                    <h1>login</h1>
                    <input v-model="login_news.user_email" type="text" placeholder="邮箱">
                    <input v-model="login_news.user_password" type="password" placeholder="密码">
                    <table>
                        <tr>
                            <td><input v-model="login_news.user_captcha" type="text" @keyup.enter="click_login"
                                    placeholder="验证码"></td>
                            <td>
                                <div id="captcha" @click="get_picture_captcha"><img style="width: 120px;height: 40px;"
                                        :src="path_img" alt="点击获取验证码"></div>
                            </td>
                        </tr>
                    </table>
                    <button @click="click_login">登录</button>
                    <a id="mianmi" @click="mia_nmi_login" href="#">免密登录</a>
                </div>
                <!-- 免密登录 -->
                <div v-if="flag && flag2" class="login-box">
                    <h1>login</h1>
                    <input v-model="login2_new.user_email" type="text" placeholder="邮箱">
                    <table>
                        <tr>
                            <td><input v-model="login2_new.user_captcha" type="text" @keyup.enter="click_login2"
                                    placeholder="验证码"></td>
                            <td><button :id="buttonClassr" :disabled="isCounting2" @click="get_captcha2">{{ count2
                            }}</button>
                            </td>
                        </tr>
                    </table>
                    <button @click="click_login2">登录</button>
                    <a id="mianmi" @click="mi_ma_login" href="#">密码登录</a>
                </div>
            </div>
            <!-- 左侧 -->
            <div class="con-box left">
                <h2>欢迎来到<span>购物之家</span></h2>
                <p>快来寻找你的<span>宝贝</span>吧</p>
                <img src="../../../assets/cat/1.jpg" alt="">
                <p>已有账号</p>
                <button @click="go_login" id="login">去登录</button>
            </div>
            <!-- 右侧 -->
            <div class="con-box right">
                <h2>欢迎来到<span>购物之家</span></h2>
                <p>快来寻得<span>珍宝</span>吧</p>
                <img src="../../../assets/cat/2.jpeg" alt="">
                <p>没有账号？</p>
                <button @click="go_register" id="register">去注册</button>
            </div>
        </div>
    </div>
</template>

<script>
// import auth from '@/auth';
// import axios from 'axios';
export default {
    name: 'login_page',
    data() {
        return {
            flag: true,
            flag2: false,
            path_img: '#',
            count: "获取验证码",       //注册的验证码读秒
            isCounting: false,       //注册的获取验证码的按钮开关
            isClicked: false,         // 注册的获取验证码的按钮开关是否被点击过

            count2: "获取验证码",     //免密登录的验证码读秒
            isCounting2: false,       //免密登录的获取验证码的按钮开关
            isClicked2: false,       // 免密登录的获取验证码的按钮开关是否被点击过
            //注册信息
            register_news: {
                user_email: '',
                user_name: '',
                user_sex: '男',
                user_password: '',
                user_captcha: ''
            },
            //密码登录信息
            login_news: {
                user_email: '',
                user_password: '',
                user_captcha: '',
                check_code: ''
            },
            //免密登录信息
            login2_new: {
                user_email: '',
                user_captcha: ''
            }


        }
    },
    methods: {
        //点击密码登录    已完成
        click_login() {
            if (this.login_news.user_email !== "" && this.login_news.user_password !== "" && this.login_news.user_captcha !== "") {
                console.log('登录');
                this.$http.post("login.php",
                    this.login_news,
                    {
                        header: {
                            'Content-Type': 'application/json'
                        }
                    }).then(res => {
                        if(res.data.status==1){
                            console.log('登录成功');
                        }else{
                            alert(res.data.message);
                        }
                        console.log("请求已发送");
                        // this.$bus.$emit('is_login_ok',res.data.status); //利用全局事件总线给其他组件传递数据
                        // this.$bus.$emit('name_and_is_seller',res.data);
                        this.$store.commit('user/setUser', res.data);     //把数据存储到vuex里
                        console.log(res.data);
                        // this.$auth.setAuthorization(res.data.session_id);
                        this.$auth.setAuthorization(res.data.seeeion_id);
                    }).catch(() => {
                        console.log('失败');
                    });
            } else {
                alert("有未完成的信息登记");
            }
        },
        //点击免密登录
        click_login2() {
            if (this.login2_new.user_email !== "" && this.login2_new.user_captcha !== "") {
                this.$http.post("login2.php",
                    this.login2_new,
                    {
                        header: {
                            'Content-Type': 'application/json'
                        }
                    }).then(res => {
                        if(res.data.status==1){
                            console.log('登录成功');
                        }else{
                            alert(res.data.message);
                        }
                        console.log("请求已发送");
                        // this.$bus.$emit('is_login_ok',res.data.status);
                        this.$store.commit('user/setUser', res.data);     //把数据存储到vuex里
                        // this.$auth.setAuthorization(res.data.session_id);
                        this.$auth.setAuthorization(res.data.seeeion_id);

                    }).catch(() => {
                        console.log('失败');
                    });
                console.log('登录');
            } else {
                alert("有未完成的信息登记");
            }
        },
        //点击注册     已完成
        click_register() {
            if (this.register_news.user_name !== "" && this.register_news.user_email !== "" && this.register_news.user_sex !== "" && this.register_news.user_password !== "" && this.register_news.user_captcha !== "") {
                this.$http.post("register.php",
                    this.register_news,
                    {
                        header: {
                            'Content-Type': 'application/json'
                        }
                    }).then(res => {
                        if(res.data.status==1){
                            alert(res.data.message);
                        }else{
                            alert(res.data.message);
                        }
                        console.log("请求已发送");

                    }).catch(() => {
                        console.log('失败');
                    });
                console.log('注册');
            } else {
                alert("有未完成的信息登记");
            }
        },
        //去登录       已完成
        go_login() {
            this.flag = !this.flag;
            var form_box = document.getElementsByClassName('form-box')[0];
            form_box.style.transform = 'translateX(0)';
        },
        //去注册       已完成
        go_register() {
            this.flag = !this.flag;
            var form_box = document.getElementsByClassName('form-box')[0];
            form_box.style.transform = 'translateX(80%)';
        },
        //免密登录显示  已完成
        mia_nmi_login() {
            this.flag2 = !this.flag2;
        },
        //密码登录显示   已完成
        mi_ma_login() {
            this.flag2 = !this.flag2;
        },
        //获取注册验证码   已完成
        get_captcha() {
            if (!this.isClicked && this.register_news.user_email != '') {
                this.count = 60;       //计时十秒
                this.countdown();   //开启计时器
                this.isClicked = true;      //设置按钮已被点击
                console.log("已点击过");
                this.$http.post("send_email_register.php",
                    {
                        'register_email': this.register_news.user_email
                    },
                    {
                        header: {
                            'Content-Type': 'application/json'
                        }
                    }).then(res => {
                        if(res.data.status==1){
                            console.log('已发送注册验证码');
                        }else{
                            alert(res.data.message);
                        }
                        console.log("请求已发送");

                    }).catch(() => {
                        console.log('失败');
                    });
                this.register_news.user_captcha = '';
            } else if (this.register_news.user_email === '') {
                alert("必须输入邮箱");
            } else {
                alert("验证码已在路上了");
            }
        },
        //获取图片验证码   已完成
        get_picture_captcha() {
            this.$http.get("/captcha/get_picture_captcha.php").then(res => {
                console.log(res.data);
                this.path_img =this.$http.defaults.baseURL+res.data.message;
                this.login_news.check_code = res.data.status;
                this.login_news.user_captcha = '';
            }).catch(() => {
                console.log('失败');
            });
        },
        //计时  注册     已完成
        countdown() {
            if (this.count > 0) {
                this.count--;
                // console.log(this.count);
                setTimeout(this.countdown, 1000);
            } else {
                this.isCounting = false;      //修改按钮的样式
                this.isClicked = false;         //设置按钮未被点击
                this.count = "获取验证码";
                console.log("计时结束");
            }
        },
        //获取登录验证码   免密登录    未完成
        get_captcha2() {
            if (!this.isClicked2 && this.login2_new.user_email != '') {
                this.count2 = 60;       //计时60秒
                this.countdown2();   //开启计时器
                this.isClicked2 = true;      //设置按钮已被点击
                console.log("已点击过");

                this.$http.post("send_email_login.php",
                    {
                        'login_email': this.login2_new.user_email
                    },
                    {
                        header: {
                            'Content-Type': 'application/json'
                        }
                    }).then(res => {
                        if(res.data.status==1){
                            console.log('验证码已发送');
                        }else{
                            alert(res.data.message);
                        }
                        console.log("免密登录请求已发送");

                    }).catch(() => {
                        console.log('失败');
                    });
                this.login2_new.user_captcha = '';
            } else if (this.login2_new.user_email === '') {
                alert("必须输入邮箱");
            } else {
                alert("验证码已在路上了");
            }
        },
        //计时 免密登录  已完成
        countdown2() {
            if (this.count2 > 0) {
                this.count2--;
                // console.log(this.count2);
                setTimeout(this.countdown2, 1000);
            } else {
                this.isCounting2 = false;      //修改按钮的样式
                this.isClicked2 = false;         //设置按钮未被点击
                this.count2 = "获取验证码";
                console.log("计时结束");
            }
        },
    },
    computed: {
        //改变“获取验证码”的按钮颜色   注册
        buttonClass() {
            return this.isClicked ? 'gray-button' : 'default-button';
        },
        //改变“获取验证码”的按钮颜色 免密登录
        buttonClassr() {
            return this.isClicked2 ? 'gray-button' : 'default-button';
        }
    },
    created() {
        this.get_picture_captcha()
    },
    beforeDestroy() {
        // this.$bus.$off('is_login_ok');
        // this.$bus.$off('name_and_is_seller');
    }

}

</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
* {
    /* 初始化 */
    margin: 0;
    padding: 0;
}

#default-button {
    background-color: rgb(255, 255, 255);
    color: rgb(138, 5, 114);
    width: 120px;
    height: 38px;
    margin-bottom: 40px;
    // margin: auto;
}

#gray-button {
    background-color: gray;
    color: white;
    width: 120px;
    height: 38px;
    margin-bottom: 40px;
}



#wai {
    padding: 10%;
}

.xb {
    width: 40%;
}

.lab {
    width: 20%;
}

td {
    // border: 1px solid red;
    width: 100px;
    color: white;
}

#get_captcha {
    width: 120px;
    margin: auto;
}

#captcha {
    // border: 1px solid red;
    width: 120px;
    height: 40px;
    margin-bottom: 6px;
}

#mianmi {
    margin: 10%;
}



body {
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(200deg, #f3e7e9, #e3eeff);
}

.container {
    background-color: #fff;
    margin: auto;
    width: 650px;
    height: 415px;
    border-radius: 5px;
    /* 阴影 */
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    /* 相对定位 */
    position: relative;
}

.form-box {
    /* 绝对定位 */
    position: absolute;
    top: -10%;
    left: 5%;
    background-color: #d3b7d8;
    width: 320px;
    height: 500px;
    border-radius: 5px;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    /* 动画过渡 加速后减速 */
    transition: 0.5s ease-in-out;
}

.register-box,
.login-box {
    /* 弹性布局 垂直排列 */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    .zhuce{
        margin-top: -2%;
    }
}

.hidden {
    display: none;
    transition: 0.5s;
}

h1 {
    text-align: center;
    margin-bottom: 25px;
    /* 大写 */
    text-transform: uppercase;
    color: #ffffff;
    /* 字间距 */
    letter-spacing: 5px;
}

input {
    background-color: black;
    // width: 70%;
    color: #000000;
    border: none;
    // /* 下边框样式 */
    // border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding: 10px 0;
    text-indent: 10px;
    margin: 8px 0;
    font-size: 14px;
    letter-spacing: 2px;
}

input::placeholder {
    color: #898181;
}

// input:focus {
//     color: #a262ad;
//     outline: none;
//     border-bottom: 1px solid #a262ad80;
//     transition: 0.5s;
// }

// input:focus::placeholder {
//     opacity: 0;
// }

.form-box button {
    width: 70%;
    margin-top: 35px;
    background-color: #f6f6f6;
    outline: none;
    border-radius: 8px;
    padding: 13px;
    color: #a262ad;
    letter-spacing: 2px;
    border: none;
    cursor: pointer;
}

.form-box button:hover {
    background-color: #a262ad;
    color: #f6f6f6;
    transition: background-color 0.5s ease;
}

.con-box {
    width: 50%;
    /* 弹性布局 垂直排列 居中 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 绝对定位 居中 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.con-box.left {
    left: -2%;
}

.con-box.right {
    right: -2%;
}

.con-box h2 {
    color: #8e9aaf;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: 4px;
}

.con-box p {
    font-size: 12px;
    letter-spacing: 2px;
    color: #8e9aaf;
    text-align: center;
}

.con-box span {
    color: #d3b7d8;
}

.con-box img {
    width: 150px;
    height: 150px;
    opacity: 0.9;
    margin: 40px 0;
}

.con-box button {
    margin-top: 2%;
    background-color: #fff;
    color: #a262ad;
    border: 1px solid #d3b7d8;
    padding: 6px 10px;
    border-radius: 5px;
    letter-spacing: 1px;
    outline: none;
    cursor: pointer;
}

.con-box button:hover {
    background-color: #d3b7d8;
    color: #fff;
}
</style>
                                                                          